<template>
  <div class="index">
    <div class="banner-box">
      <UiHeader class="ui-header" @toggle="SetMuteIcon" />
      <div class="banner-index swiper" id="j-banner-index">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <video
              ref="videoRef1"
              autoplay
              muted
              src="http://zljypt.swu.edu.cn/a/file/%E5%85%B6%E4%BB%96/2a53c22fdefaaeb66270e757de736c48.mp4"></video>
            <i ref="videoIcon1" class="icon-mute" :style="{ top: headerIsHide ? '168px' : '646px' }" @click="PlayAudio(1)"></i>
          </div>
          <div class="swiper-slide">
            <video ref="videoRef2" muted src="http://zljypt.swu.edu.cn/a/file/%E5%85%B6%E4%BB%96/AE%E5%90%88%E6%88%902.mp4"></video>
            <i ref="videoIcon2" class="icon-mute" :style="{ top: headerIsHide ? '168px' : '646px' }" @click="PlayAudio(2)"></i>
          </div>
        </div>
        <div class="swiper-pagination"></div>
      </div>
    </div>
    <div class="bg-top">
      <div class="ui-center">
        <div class="title-line ui-flex align-center justify-center">知识空间</div>
        <div class="title-box ui-flex align-center justify-between">
          <div class="icon icon-1"></div>
          <a href="./listSpace?active=0" class="more"></a>
        </div>
        <div class="red-box ui-flex" ref="animateRef1">
          <!-- <div class="left">
            <Transition
              enter-active-class="animate__animated animate__fadeInLeft animate__slow"
              leave-active-class="animate__animated animate__fadeOutLeft animate__slow">
              <img v-show="animate1" src="../../assets/mock/1.png" alt="" />
            </Transition>
          </div> -->
          <div class="right">
            <Transition
              enter-active-class="animate__animated animate__fadeInDown animate__slow"
              leave-active-class="animate__animated animate__fadeOutUp">
              <div
                v-show="animate1"
                :class="['item', { on: redIndex === 0 }]"
                @mouseover="ChangeRedIndex(0)"
                @click="Jump('/listSpaceList?categoryId=1&tabActive=0')">
                <div class="title">
                  <i class="arrow"></i>
                  <span>共同开拓辽阔疆域</span>
                  <i class="arrow down"></i>
                </div>
              </div>
            </Transition>
            <Transition
              enter-active-class="animate__animated animate__fadeInUp animate__slow"
              leave-active-class="animate__animated animate__fadeOutDown animate__slow">
              <div
                v-show="animate1"
                :class="['item item-5', { on: redIndex === 4 }]"
                @mouseover="ChangeRedIndex(4)"
                @click="Jump('/listSpaceList?categoryId=5&tabActive=0')">
                <div class="title">
                  <i class="arrow"></i>
                  <span>共同缔造统一多民族国家</span>
                  <i class="arrow down"></i>
                </div>
              </div>
            </Transition>
            <Transition
              enter-active-class="animate__animated animate__fadeInUp animate__slow"
              leave-active-class="animate__animated animate__fadeOutDown animate__slow">
              <div
                v-show="animate1"
                :class="['item item-2', { on: redIndex === 1 }]"
                @mouseover="ChangeRedIndex(1)"
                @click="Jump('/listSpaceList?categoryId=2&tabActive=0')">
                <div class="title">
                  <i class="arrow"></i>
                  <span>共同书写悠久历史</span>
                  <i class="arrow down"></i>
                </div>
              </div>
            </Transition>
            <Transition
              enter-active-class="animate__animated animate__fadeInDown animate__slow"
              leave-active-class="animate__animated animate__fadeOutUp animate__slow">
              <div
                v-show="animate1"
                :class="['item item-3', { on: redIndex === 2 }]"
                @mouseover="ChangeRedIndex(2)"
                @click="Jump('/listSpaceList?categoryId=3&tabActive=0')">
                <div class="title">
                  <i class="arrow"></i>
                  <span>共同创造灿烂文化</span>
                  <i class="arrow down"></i>
                </div>
              </div>
            </Transition>
            <Transition
              enter-active-class="animate__animated animate__fadeInUp animate__slow"
              leave-active-class="animate__animated animate__fadeOutDown animate__slow">
              <div
                v-show="animate1"
                :class="['item item-4', { on: redIndex === 3 }]"
                @mouseover="ChangeRedIndex(3)"
                @click="Jump('/listSpaceList?categoryId=4&tabActive=0')">
                <div class="title">
                  <i class="arrow"></i>
                  <span>共同培育伟大精神</span>
                  <i class="arrow down"></i>
                </div>
              </div>
            </Transition>
          </div>
        </div>
        <div class="intro-box ui-flex">
          <div class="left flex-1">
            <div class="list ui-flex justify-end">
              <div
                v-for="item in natureList"
                :key="item.subjectId"
                :class="['item', { on: currentNature.subjectId === item.subjectId }]"
                @click="ChangeNature(item)">
                {{ item.title }}
              </div>
            </div>
            <div class="title-text">民族文化走廊介绍</div>
            <div class="info-title">
              所谓民族走廊，是指一定的民族或族群长期沿着一定的自然环境如河流或山脉向外迁徙或流动的路线在这条走廊中必然保留着该民族或族群众多的历史与文化的沉淀。
            </div>
            <div class="info-text">“走廊”是费孝通在1980年前后提出的一个集合了历史内涵与地理特征的分析概念。</div>
            <div class="info-text">
              1982年12月，他在中央民族学院民族研究所座谈会上谈道，“我们需要一个宏观的、全面的、整体的观念，看中国民族大家庭里的各个成分在历史上是怎样运动的”“一条西北走廊，一条藏彝走廊，一条南岭走廊，还有一个地区包括东北几省，倘若这样来看，中华民族差不多就有一个全面的概念了”。
            </div>
            <div class="info-text">
              他认为，“对这些走廊展开文献和实地田野考察，民族研究者能够看到民族之间文化交流的历史，从而能对中华民族的内部多样性有一个比较生动的认识。目前的民族走廊研究包括了藏彝走廊、河西走廊、南岭走廊、苗疆走廊等走廊地带的研究。
            </div>
            <a href="./listSpace?active=1" class="more"></a>
          </div>
          <div class="right" ref="animateRef2">
            <Transition
              enter-active-class="animate__animated animate__fadeInDown animate__slow"
              leave-active-class="animate__animated animate__fadeOutUp animate__slow">
              <div v-show="animate2" class="img-box" @click="Jump('/listSpaceList?subjectId=' + currentNature.subjectId + '&type=1')">
                <img :src="currentNature.url" alt="" />
              </div>
            </Transition>
          </div>
        </div>
      </div>
    </div>
    <div class="ui-center">
      <div class="title-line ui-flex align-center justify-center">课程与教学</div>
      <div class="teach-box" ref="animateRef3">
        <Transition
          enter-active-class="animate__animated animate__fadeInUp"
          leave-active-class="animate__animated animate__fadeOutDown animate__slower">
          <div v-show="animate3">
            <div class="teach-cate" v-for="item in stageList" :key="item.id">
              <div class="label">{{ item.description }}：</div>
              <div
                :class="['item', { on: stageId === items.value }]"
                v-for="items in item.dictDetails"
                :key="items.id"
                @click="ChooseLessonDict(items.value, 'stage')">
                {{ items.label }}
              </div>
            </div>
            <div class="teach-cate" v-for="item in gradeList" :key="item.id">
              <div class="label">{{ item.description }}：</div>
              <div
                :class="['item', { on: gradeId === items.value }]"
                v-for="items in currentGrade"
                :key="items.id"
                @click="ChooseLessonDict(items.value, 'grade')">
                {{ items.label }}
              </div>
            </div>
            <div class="teach-list">
              <div class="date-btn ui-flex">
                <div :class="['btn prev', { on: horizontalAllowPrev }]" @click="SlideHorizontal(false)"></div>
                <div :class="['btn next', { on: horizontalAllowNext }]" @click="SlideHorizontal(true)"></div>
              </div>
              <a
                v-for="item in lessonList"
                :key="item.id"
                :href="baseURL + item.fileUrl"
                target="_blank"
                class="item"
                :style="{ transform: 'translateX(' + -horizontalIndex * 304 + 'px)' }">
                <div class="banner">
                  <img :src="baseURL + item.coverImg" :alt="item.name" />
                </div>
                <div class="title">{{ item.name }}</div>
              </a>
            </div>
          </div>
        </Transition>
      </div>
    </div>
    <div class="bg-bottom">
      <div class="ui-center">
        <div class="title-line ui-flex align-center justify-center">田野调查·扎根学校</div>
        <div class="map-box" ref="animateRef4">
          <Transition
            enter-active-class="animate__animated animate__fadeInUp animate__slow"
            leave-active-class="animate__animated animate__fadeOutDown animate__slow">
            <div v-show="animate4" class="ui-flex">
              <div class="left">
                <div class="title-box ui-flex align-center justify-between">
                  <div class="icon icon-2"></div>
                  <!-- <div class="more text">更多+</div> -->
                </div>
                <ProvinceMap ref="provinceMap" ext-type="school,workstation" />
              </div>
              <div class="right news-box">
                <div class="title-box ui-flex align-center justify-between">
                  <div class="icon icon-3"></div>
                  <a href="./listSchoolAndNews" class="more text">更多+</a>
                </div>
                <div class="list">
                  <div class="banner-news-2 swiper" id="j-banner-news">
                    <div class="swiper-wrapper">
                      <div class="swiper-slide" v-if="(fieldworkSubject['banner'] ?? []).length === 0">
                        <img src="../../assets/mock/banner-7.jpg" alt="" />
                      </div>
                      <div class="swiper-slide" v-for="item in fieldworkSubject['banner'] ?? []" @click="Jump(`/listNewsDetail?id=${item.id}`)">
                        <img :src="baseURL + item['coverImg']" alt="" />
                      </div>
                    </div>
                  </div>
                  <div class="item" v-for="item in fieldworkSubject['knowledge'] ?? []" @click="Jump(`/listNewsDetail?id=${item.id}`)">
                    <div class="title ui-oneline">{{ item.title }}</div>
                    <div class="date">{{ item['createTime'] }}</div>
                  </div>
                </div>
              </div>
            </div>
          </Transition>
        </div>
        <div class="news-box" ref="animateRef5">
          <Transition
            enter-active-class="animate__animated animate__fadeInUp animate__slow"
            leave-active-class="animate__animated animate__fadeOutDown animate__slow">
            <a href="http://epc.swu.edu.cn/sys/gztd.htm" target="_blank">
              <div v-show="animate5" class="title-box ui-flex align-center justify-between">
                <i class="title"></i>
                <a class="more"></a>
              </div>
            </a>
          </Transition>
          <Transition
            enter-active-class="animate__animated animate__slideInUp animate__slow"
            leave-active-class="animate__animated animate__fadeOutDown animate__slow">
            <div v-show="animate5" class="news ui-flex align-center">
              <div class="banner-news-box">
                <div class="banner-news swiper" id="j-banner-news-2">
                  <div class="swiper-wrapper">
                    <div class="swiper-slide">
                      <img src="../../assets/mock/banner-4.png" alt="" />
                    </div>
                    <div class="swiper-slide">
                      <img src="../../assets/mock/banner-1.png" alt="" />
                    </div>
                    <div class="swiper-slide">
                      <img src="../../assets/mock/banner-2.png" alt="" />
                    </div>
                    <div class="swiper-slide">
                      <img src="../../assets/mock/banner-3.png" alt="" />
                    </div>
                  </div>
                  <div class="swiper-pagination"></div>
                </div>
              </div>
              <div class="edu-list">
                <div class="edu-title">平台简介</div>
                <div class="text">
                  西南民族教育与心理研究中心于 2021
                  年启动了“中华民族共同体意识教育实验室”建设项目。中华民族共同体意识教育实验室的基本定位，是以铸牢中华民族共同体意识为主线，以实验空间、知识空间为支撑、开展基础性、前瞻性实验研究的平台。
                </div>
                <div class="text">
                  目前，团队正在开发、设计“中华民族共同体意识”教育指标体系；构建以“中华民族共同体意识”为核心内容的知识库（数据库）、搭建实验平台，开展“中华民族共同体意识教育”的专题实验。
                </div>
              </div>
            </div>
          </Transition>
        </div>
      </div>
    </div>
    <UiFooter />
  </div>
</template>

<script setup>
import Swiper from 'swiper';
import { Pagination, Autoplay } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/pagination';
import 'animate.css';

import img1 from '../../assets/mock/banner-intro.png';
import img2 from '../../assets/mock/map-2.jpg';
import img3 from '../../assets/mock/map-3.jpg';
import img4 from '../../assets/mock/map-4.jpg';
import ProvinceMap from '@/components/ProvinceMap.vue';

const { get, router, baseURL } = inject('global');

// 顶部banner
let swiperVideo,
  headerIsHide = ref(false);
const InitSwiper = () => {
  swiperVideo = new Swiper('#j-banner-index', {
    modules: [Pagination],
    loop: true,
    pagination: {
      el: '.swiper-pagination',
      clickable: true
    },
    on: {
      afterInit: () => {
        // swiper视频播完后切换下一个
        for (let i = 0; i < document.getElementsByTagName('video').length; i++) {
          document.getElementsByTagName('video')[i].addEventListener('ended', () => {
            swiperVideo.slideNext();
          });
        }
      },
      slideChangeTransitionEnd: swiper => {
        if (swiper.realIndex === 1) {
          videoRef1.value.pause();
          videoRef2.value.play();
        } else {
          videoRef2.value.pause();
          videoRef1.value.play();
        }
      }
    }
  });
};
// 静音按钮
let videoRef1 = ref(),
  videoIcon1 = ref(),
  videoRef2 = ref(),
  videoIcon2 = ref();
const PlayAudio = index => {
  if (index === 1) {
    videoRef1.value.muted = !videoRef1.value.muted;
    videoIcon1.value.classList.toggle('on');
  } else {
    videoRef2.value.muted = !videoRef2.value.muted;
    videoIcon2.value.classList.toggle('on');
  }
};
const SetMuteIcon = isHide => {
  headerIsHide.value = isHide;
};

// 扎根学校banner
let swiperNews;
const InitSwiperNews = () => {
  swiperNews = new Swiper('#j-banner-news', {
    modules: [Autoplay],
    loop: true,
    autoplay: true
  });
};

// 平台简介banner
let swiperNews2;
const InitSwiperNews2 = () => {
  swiperNews2 = new Swiper('#j-banner-news-2', {
    modules: [Pagination, Autoplay],
    loop: true,
    autoplay: true,
    pagination: {
      el: '.swiper-pagination',
      clickable: true
    }
  });
};

// 四个共同切换
let redIndex = ref(0);
const ChangeRedIndex = index => {
  redIndex.value = index;
};

// 首页动画
let animate1 = ref(false),
  animateRef1 = ref(),
  animate2 = ref(false),
  animateRef2 = ref(),
  animate3 = ref(false),
  animateRef3 = ref(),
  animate4 = ref(false),
  animateRef4 = ref(),
  animate5 = ref(false),
  animateRef5 = ref(),
  provinceMap = ref();
const InitAnimate = () => {
  window.addEventListener('scroll', CheckVisibility);
  window.addEventListener('resize', CheckVisibility);
};
const RemoveAnimate = () => {
  window.removeEventListener('scroll', CheckVisibility);
  window.removeEventListener('resize', CheckVisibility);
};
const CheckVisibility = () => {
  CalcIsVisible(animate1, animateRef1);
  CalcIsVisible(animate2, animateRef2);
  CalcIsVisible(animate3, animateRef3);
  CalcIsVisible(animate4, animateRef4);
  CalcIsVisible(animate5, animateRef5);
};
const CalcIsVisible = (flag, ref) => {
  let rect = ref.value.getBoundingClientRect();
  const viewHeight = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
  flag.value = rect.bottom - rect.height / 2 < viewHeight;
  if (flag.value && provinceMap.value) {
    provinceMap.value.resizeMap();
  }
};

// 课程案例
let lessonList = ref([]),
  stageList = ref([]),
  fieldworkSubject = ref({}),
  stageId = ref(0),
  gradeList = ref([]),
  gradeId = ref(0),
  currentGrade = computed(() => {
    let list = [];
    if (gradeList.value.length) {
      if (!stageId.value) {
        list = gradeList.value[0].dictDetails;
      } else {
        gradeList.value[0].dictDetails.map(item => {
          if (stageId.value.split('_')[1] == item.value.split('_')[1]) {
            list.push(item);
          }
        });
      }
    }
    return list;
  });
const GetLessonDict = async () => {
  get('/dict', { blurry: 'learning_stage' }).then(res => {
    stageList.value = res.content;
    stageId.value = stageList.value[0].dictDetails[0].value;
  });
  get('/dict', { blurry: 'learning_grade' }).then(res => {
    gradeList.value = res.content;
    gradeId.value = gradeList.value[0].dictDetails[0].value;
    GetLessonList();
  });
};
const GetLessonList = () => {
  get('/textbook', {
    learningGrade: gradeId.value ? gradeId.value : stageId.value ? stageId.value : undefined
  }).then(res => {
    lessonList.value = res.content;
  });
};
const ChooseLessonDict = (value, type) => {
  if (type === 'stage') {
    stageId.value = value;
    gradeId.value = 0;
  } else {
    gradeId.value = value;
  }
  horizontalIndex.value = 0;
  lessonList.value = [];
  GetLessonList();
};

// 水平滚动
let horizontalIndex = ref(0),
  horizontalAllowNext = computed(() => horizontalIndex.value < lessonList.value.length - 5),
  horizontalAllowPrev = computed(() => horizontalIndex.value > 0);
const SlideHorizontal = isNext => {
  if (isNext && horizontalAllowNext.value) {
    horizontalIndex.value++;
  } else if (!isNext && horizontalAllowPrev.value) {
    horizontalIndex.value--;
  }
};

const GetFieldworkList = () => {
  get('/fieldwork', {}).then(res => {
    fieldworkSubject.value = res[res['subjectCode']];
  });
};

// 民族走廊切换
let natureList = ref([
    {
      url: img1,
      title: '藏彝走廊',
      subjectId: 1
    },
    {
      url: img2,
      title: '河西走廊',
      subjectId: 2
    },
    {
      url: img3,
      title: '南岭走廊',
      subjectId: 3
    },
    {
      url: img4,
      title: '苗疆走廊',
      subjectId: 4
    }
  ]),
  currentNature = reactive({});
const ChangeNature = data => {
  currentNature = Object.assign(currentNature, data);
};

// 页面跳转
const Jump = url => {
  router.push(url);
};

onMounted(() => {
  InitSwiper();
  InitSwiperNews();
  InitSwiperNews2();
  InitAnimate();
  ChangeNature(natureList.value[0]);
  GetLessonDict();
  GetLessonList();
  GetFieldworkList();
});

onUnmounted(() => {
  RemoveAnimate();
});
</script>

<style lang="scss" scoped>
.index {
  background-color: #ede8e2;
  .banner-box {
    position: relative;
    .ui-header {
      position: absolute;
      top: 0;
      z-index: 2;
      width: 100%;
    }
    .banner-index {
      width: 100%;
      height: 100vh;
      --swiper-pagination-bottom: 40px;
      img,
      video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        background-color: #000;
      }
      .icon-mute {
        position: absolute;
        top: 646px;
        right: 50px;
        display: block;
        width: 48px;
        height: 48px;
        @include bgImg('../../assets/mute.png');
        cursor: pointer;
        transition: top 1s ease-in-out;
        &.on {
          @include bgImg('../../assets/mute_on.png');
        }
      }
      :deep() .swiper-pagination-bullet {
        width: 36px;
        height: 36px;
        margin: 0 12px;
        @include bgImg('../../assets/banner-pagination.png');
        background-color: transparent;
        opacity: 1;
        &.swiper-pagination-bullet-active {
          @include bgImg('../../assets/banner-pagination_on.png');
        }
      }
    }
  }
  .bg-top {
    @include bgImg('../../assets/index-bg-top.png');
    background-size: 100% 919px;
  }
  .bg-bottom {
    @include bgImg('../../assets/index-bg-bottom.png');
    background-size: 100% 1259px;
    background-position: center bottom;
  }
  .title-line {
    font-size: 20px;
    line-height: 1;
    color: #373737;
    height: 120px;
    @include bgImg('../../assets/title-bg.png');
  }
  .title-box {
    padding-bottom: 30px;
    .icon {
      width: 200px;
      height: 82.44px;
      &.icon-1 {
        @include bgImg('../../assets/title-1.png');
      }
      &.icon-2 {
        height: 68.83px;
        @include bgImg('../../assets/title-2.png');
      }
      &.icon-3 {
        @include bgImg('../../assets/title-3.png');
        opacity: 0;
      }
    }
    .more {
      display: block;
      width: 100px;
      height: 50px;
      @include bgImg('../../assets/more.png');
    }
  }
  .red-box {
    .left {
      flex-shrink: 0;
      width: 595px;
      height: 400px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .right {
      flex: 1;
      min-width: 0;
      min-height: 400px;
      display: flex;
      .item {
        position: relative;
        width: 185px;
        height: 400px;
        @include bgImg('../../assets/mock/2.png');
        background-position: center center;
        background-size: 100% 400px;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 0;
        justify-content: center;
        cursor: pointer;
        transition: width 0.5s linear;
        background-color: rgba(0, 0, 0, 0.5);
        &.item-2 {
          @include bgImg('../../assets/mock/9.png');
        }
        &.item-3 {
          @include bgImg('../../assets/mock/10.png');
        }
        &.item-4 {
          @include bgImg('../../assets/mock/11.png');
        }
        &.item-5 {
          @include bgImg('../../assets/mock/13.png');
        }
        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          z-index: 2;
          display: block;
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.5);
        }
        &:hover,
        &.on {
          width: 540px;
          padding: 0 0 0 46px;
          justify-content: flex-start;
          background-size: auto 100% !important;
          &::before {
            display: none;
          }
          &.item {
            @include bgImg('../../assets/mock/2_on.png');
          }
          &.item-2 {
            @include bgImg('../../assets/mock/9_on.png');
          }
          &.item-3 {
            @include bgImg('../../assets/mock/10_on.png');
          }
          &.item-4 {
            @include bgImg('../../assets/mock/11_on.png');
          }
          &.item-5 {
            @include bgImg('../../assets/mock/13_on.png');
          }
        }
        .title {
          font-size: 18px;
          font-weight: bold;
          color: #ffffff;
          writing-mode: vertical-rl;
          display: flex;
          align-items: center;
          position: relative;
          .arrow {
            width: 40px;
            height: 22px;
            margin: 10px 0;
            @include bgImg('../../assets/banner-bg.png');
            &.down {
              transform: rotate(180deg);
            }
          }
          span {
            position: relative;
          }
        }
      }
    }
  }
  .intro-box {
    padding: 40px 0 20px 0;
    .left {
      .list {
        position: relative;
        padding: 0 5px 0 0;
        height: 116px;
        .item {
          position: relative;
          width: 132px;
          font-size: 24px;
          color: rgba(156, 44, 41, 0.5);
          height: 48px;
          text-align: center;
          line-height: 48px;
          cursor: pointer;
          @include bgImg('../../assets/bg-intro.png');
          &:hover,
          &.on {
            color: #fff;
            @include bgImg('../../assets/bg-intro_on.jpg');
            &::after {
              content: '';
              width: 1px;
              height: 8px;
              position: absolute;
              top: 52px;
              left: 50%;
              transform: translate(0, -50%);
              background-color: #9c2c29;
            }
          }
        }
        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          right: -45px;
          display: block;
          width: 600px;
          height: 66px;
          @include bgImg('../../assets/intro-line.png');
        }
      }
      .title-text {
        font-size: 24px;
        font-weight: 900;
        color: #3e3938;
        line-height: 34px;
        margin: -80px 0 20px 0;
      }
      .info-title {
        font-size: 16px;
        line-height: 32px;
        color: #000000;
        padding: 0 120px 0 0;
        text-decoration: underline;
      }
      .info-text {
        font-size: 14px;
        color: #000000;
        line-height: 24px;
        padding: 10px 120px 0 0;
      }
      .more {
        display: block;
        width: 100px;
        height: 50px;
        margin: 33px 0 0 0;
        @include bgImg('../../assets/more.png');
      }
    }
    .right {
      position: relative;
      z-index: 2;
      width: 517px;
      height: 371px;
      .img-box {
        padding: 5px;
        background-color: #fff;
        border: 1px solid #9c2c29;
        box-sizing: border-box;
      }
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
  .teach-box {
    min-height: 573px;
    .teach-cate {
      line-height: 32px;
      font-size: 18px;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      .label {
        color: #9c2c29;
        margin: 0 0 15px 0;
      }
      .item {
        margin: 0 0 15px 11px;
        padding: 8px 20px;
        color: #3d3d3d;
        cursor: pointer;
        position: relative;
        &:hover,
        &.on {
          background: #9c2c29;
          color: #ffffff;
          &::after {
            content: '';
            display: block;
            width: 10px;
            height: 10px;
            border-radius: 5px;
            border: 1px solid #ffffff;
            position: absolute;
            box-sizing: border-box;
            top: 11px;
            right: 14px;
          }
        }
      }
    }
    .teach-list {
      display: flex;
      gap: 19px;
      padding: 82px 0 0 0;
      overflow: hidden;
      position: relative;
      .date-btn {
        position: absolute;
        top: 20px;
        left: 0;
        .btn {
          width: 32px;
          height: 32px;
          cursor: pointer;
          @include bgImg('@/assets/list/school-arrow.png');
          &.prev {
            transform: rotate(180deg);
          }
          &.next {
            margin-left: 20px;
          }
          &.on {
            @include bgImg('@/assets/list/school-arrow_on.png');
          }
        }
      }
      .item {
        box-sizing: border-box;
        cursor: pointer;
        transition: all 0.3s ease;
        &:hover {
          transform: translateY(-13px);
          .banner {
            background: #ffffff;
          }
        }
        .title {
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 20px;
          font-weight: bold;
          color: #373737;
          padding: 28px 0 0 0;
          &::before {
            content: '';
            display: block;
            width: 22px;
            height: 40px;
            margin-right: 20px;
            @include bgImg('../../assets/banner-bg_brown.png');
          }
          &::after {
            content: '';
            display: block;
            width: 22px;
            height: 40px;
            margin-left: 20px;
            @include bgImg('../../assets/banner-bg_brown.png');
            transform: rotate(180deg);
          }
        }
        .banner {
          width: 236px;
          height: 297.45px;
          border: 1px solid #9c2c29;
          box-sizing: border-box;
          padding: 8px;
          background: rgba(255, 255, 255, 0.32);
          box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.3);
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
      }
    }
  }
  .map-box {
    min-height: 732px;
    .title-box {
      .more {
        display: block;
        width: auto;
        height: auto;
        font-size: 22px;
        color: #9c2c29;
        background: none;
      }
    }
    .left {
      width: 625px;
      img {
        width: 100%;
        height: 643px;
        object-fit: cover;
      }
    }
    .right {
      flex: 1;
      min-width: 0;
      padding: 0 0 0 30px;
      .banner-news-2 {
        flex: 1;
        height: 318px;
        margin-bottom: 10px;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      .list .item {
        border: none;
        margin-bottom: 10px;
        cursor: pointer;
      }
    }
  }
  .news-box {
    padding: 30px 0 55px 0;
    min-height: 582px;
    .title-box .title {
      width: 200px;
      height: 73.84px;
      @include bgImg('../../assets/title-4.png');
    }
    .news {
      height: 424px;
      padding: 49px 109px;
      box-sizing: border-box;
      @include bgImg('@/assets/index-bg-edu.png');
    }
    .banner-news-box {
      width: 576px;
      height: 324px;
      box-sizing: border-box;
      padding: 7px 6px;
      margin-right: 39px;
      @include bgImg('@/assets/bg-banner-news.png');
    }
    .banner-news {
      width: 560px;
      height: 310px;
      .swiper-slide {
        position: relative;
        border: 4px solid #cebeab;
        box-shadow: 10px 10px 20px 0px rgba(214, 198, 178, 0.5);
        box-sizing: border-box;
      }
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      :deep() .swiper-pagination-bullet {
        width: 36px;
        height: 36px;
        margin: 0 12px;
        @include bgImg('../../assets/banner-pagination.png');
        background-color: transparent;
        opacity: 1;
        &.swiper-pagination-bullet-active {
          @include bgImg('../../assets/banner-pagination_on.png');
        }
      }
    }
    .list {
      .item {
        display: flex;
        align-items: center;
        padding: 8px 0;
        font-size: 14px;
        color: #34424f;
        border-bottom: 1px dashed #bfbfbf;
        margin-bottom: 20px;
        box-sizing: border-box;
        line-height: 18px;
        &:last-child {
          margin: 0;
        }
        &::before {
          content: '';
          display: block;
          width: 14px;
          height: 2px;
          background: #9c2c29;
          margin-right: 13px;
        }
        .title {
          width: 0;
          flex: 1;
          padding: 0 30px 0 0;
        }
        .date {
          font-size: 14px;
          color: #9e9e9e;
          padding: 0 20px;
        }
      }
    }
    .edu-list {
      flex: 1;
      .edu-title {
        line-height: 35px;
        font-size: 22px;
        color: #7c715f;
        display: flex;
        justify-content: center;
        padding: 22px 0 30px 0;
        white-space: nowrap;
        &::before {
          content: '';
          display: block;
          width: 190px;
          height: 28px;
          margin-right: 10px;
          @include bgImg('@/assets/edu-title.png');
        }
        &::after {
          content: '';
          display: block;
          width: 190px;
          height: 28px;
          margin-left: 10px;
          transform: rotate(180deg);
          @include bgImg('@/assets/edu-title.png');
        }
      }
      .text {
        line-height: 32px;
        font-size: 14px;
        color: #34424f;
        padding: 0 20px 10px 0;
        position: relative;
        &::before {
          content: '';
          display: block;
          width: 8px;
          height: 8px;
          background: #d4c8b9;
          position: absolute;
          top: 13px;
          left: -18px;
        }
        &:last-child {
          padding-bottom: 0;
        }
      }
    }
  }
}
</style>
